<template>
  <div class="container mx-auto p-4">


    <div class="flex space-x-2 justify-center mt-2" >

      <ul style="list-style-type: none; display: flex; justify-content: left;" >
        <li>桩基工程数据概览</li>
        <li>
          <el-input type="text" v-model="queryParams.pileNumber" placeholder="请输入桩号"></el-input>
        </li>
        <li>
          <el-button @click="select">查询</el-button>
        </li>
      </ul>
    </div>
    <el-table
        :data="pileData"
        style="width: 100%"
        border
        @row-click="pileClick"
    >
      <el-table-column
          prop="id"
          label="ID"
          width="80"
          align="center"
          class-name="whitespace-nowrap"
      />
      <el-table-column
          prop="pileNumber"
          label="桩基号"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pileNumber" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="mileage"
          label="里程"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.mileage" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="offset"
          label="偏距"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.offset" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="coordinateX"
          label="坐标X"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.coordinateX" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="coordinateY"
          label="坐标Y"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.coordinateY" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="pileBottomElevation"
          label="桩底高程"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pileBottomElevation" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="pileTopElevation"
          label="桩顶高程"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pileTopElevation" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="pileDiameter"
          label="桩径"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pileDiameter" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="pileLength"
          label="桩长"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pileLength" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="steelCageLength"
          label="钢筋笼长度"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.steelCageLength" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="overPouringLength"
          label="超灌长度"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.overPouringLength" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="groundElevation"
          label="地面高程"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.groundElevation" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="actualPileBottomElevation"
          label="实际桩底高程"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.actualPileBottomElevation" size="small" type="number" />
        </template>
      </el-table-column>
      <el-table-column
          prop="excavationTime"
          label="开挖时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.excavationTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="holeOpeningTime"
          label="开孔时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.holeOpeningTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="holeCompletionTime"
          label="成孔时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.holeCompletionTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="reinforcementCageLoweringTime"
          label="下钢筋笼时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.reinforcementCageLoweringTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="conduitLoweringTime"
          label="下导管时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.conduitLoweringTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="pouringTime"
          label="浇筑时间"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.pouringTime" size="small" />
        </template>
      </el-table-column>
      <el-table-column
          prop="testBlockNumber"
          label="试块编号"
          align="center"
          class-name="whitespace-nowrap"
      >
        <template #default="scope">
          <el-input v-model="scope.row.testBlockNumber" size="small" />
        </template>
      </el-table-column>
      <!-- 编辑和删除按钮列 -->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editRow(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 子组件弹出框 -->
    <div v-if="showEditModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <PileDataEdit :data="editRowData" @save="handleSave" />
    </div>

    <!-- 分页部分 -->
    <div class="flex justify-center mt-4">
      <el-button @click="prevPage" :disabled="currentPage === 1">上一页</el-button>
      <span class="mx-2">{{ currentPage }} / {{ totalPages }}</span>
      <el-button @click="nextPage" :disabled="currentPage === totalPages">下一页</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import axios from "axios";
import { ElTable, ElTableColumn, ElInput, ElButton } from 'element-plus';
import PileDataEdit from './PileDataEdit.vue';
import {getPiles} from "@/apis/api_pile.js"; // 引入子组件

defineProps({
  message: { type: String, required: true },
});

const pileData = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(9);
const totalPages = ref(1);
const queryParams = ref({
  id: '',
  pileNumber: '',
  mileage: '',
  offset: '',
  coordinateX: '',
  coordinateY: '',
  pileBottomElevation: '',
  pileTopElevation: '',
  pileDiameter: '',
  pileLength: '',
  steelCageLength: '',
  overPouringLength: '',
  groundElevation: '',
  actualPileBottomElevation: '',
  excavationTime: '',
  holeOpeningTime: '',
  holeCompletionTime: '',
  reinforcementCageLoweringTime: '',
  conduitLoweringTime: '',
  pouringTime: '',
  testBlockNumber: '',
});

const showEditModal = ref(false); // 控制子组件弹出框的显示与隐藏
const editRowData = ref({}); // 传递给子组件的待编辑数据

const getPileData = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: itemsPerPage.value,
    ...queryParams.value
  };
  axios
      .get(`http://localhost:8080/pileData/page`, { params })
      .then((res) => {
        pileData.value = res.data.records;
        totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);
      })
      .catch((error) => {
        console.log("数据错误", error);
      });
};
const select = () => {

  getPileData();
}

const pileClick = (row, event, column) => {
  console.log('选中行数据', row);
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    getPileData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    getPileData();
  }
};

const fetchData = () => {
  currentPage.value = 1;
  getPileData();
};

const editRow = (row) => {
  showEditModal.value = true;
  editRowData.value = {...row }; // 将待编辑的数据传递给子组件
};

const deleteRow = (row) => {
  console.log('删除行数据', row);
  // 这里可以添加删除逻辑，比如调用 API 删除数据并刷新列表
};

const handleSave = (updatedData) => {
  // 找到要更新的数据在列表中的索引
  const index = pileData.value.findIndex((item) => item.id === updatedData)}
onMounted(() => {getPileData()})
</script>